import { Callout } from "nextra/components"
import { TailoredExperience, LinkToCopilotCloud } from "@/components";
import SelfHostingCopilotRuntimeCreateEndpoint from "@/snippets/self-hosting-copilot-runtime-create-endpoint.mdx";
import SelfHostingCopilotRuntimeConfigureCopilotKitProvider from "@/snippets/self-hosting-copilot-runtime-configure-copilotkit-provider.mdx";

# Step 2: Setup CopilotKit

Now that we have our todo list app running, we're ready to integrate CopilotKit. For this tutorial, we will install the following dependencies:

- `@copilotkit/react-core`: The core library for CopilotKit, which contains the CopilotKit provider and useful hooks.
- `@copilotkit/react-ui`: The UI library for CopilotKit, which contains the CopilotKit UI components such as the sidebar, chat popup, textare and more.

## Install Dependencies

To install the CopilotKit dependencies, run the following:

```shell npm2yarn
npm install @copilotkit/react-core @copilotkit/react-ui
```

## Setup CopilotKit
<TailoredExperience.Toggle />

<TailoredExperience.CloudContent>

  ### Configure the `<CopilotKit />` Provider

  The `<CopilotKit>` provider will wrap our app. Let's add it to the `page.tsx` file.

  <Callout type="info">
    <LinkToCopilotCloud>Click here to get your Copilot Cloud API key for free</LinkToCopilotCloud>. Then, replace `<your-public-api-key>` with your actual API key.
  </Callout>

  ```tsx filename="app/page.tsx" showLineNumbers {5,9,13}
  "use client";

  import { TasksList } from "@/components/TasksList";
  import { TasksProvider } from "@/lib/hooks/use-tasks";
  import { CopilotKit } from "@copilotkit/react-core";

  export default function Home() {
    return (
      <CopilotKit publicApiKey={"<your-public-api-key>"}>
        <TasksProvider>
          <TasksList />
        </TasksProvider>
      </CopilotKit>
    );
  }
  ```
</TailoredExperience.CloudContent>

<TailoredExperience.SelfHostContent>
  ### Step 1: Set up Copilot Runtime Endpoint

  <SelfHostingCopilotRuntimeCreateEndpoint />

  ### Step 2: Configure the CopilotKit Provider

  ```tsx filename="app/page.tsx" showLineNumbers {5,9,13}
  "use client";

  import { TasksList } from "@/components/TasksList";
  import { TasksProvider } from "@/lib/hooks/use-tasks";
  import { CopilotKit } from "@copilotkit/react-core";

  export default function Home() {
    return (
      <CopilotKit runtimeUrl={"<your-runtime-url>"}>
        <TasksProvider>
          <TasksList />
        </TasksProvider>
      </CopilotKit>
    );
  }
  ```

</TailoredExperience.SelfHostContent>

### CopilotKit Chat Popup

We provide several plug-and-play components for you to interact with your copilot. Some of these are `<CopilotPopup/>`, `<CopilotSidebar/>`, and `<CopilotChat/>`. You can of course use CopilotKit in headless mode and provide your own fully custom UI via [`useCopilotChat`](/reference/hooks/useCopilotChat).

In this tutorial, we'll use the `<CopilotPopup/>` component to display the chat popup.

```tsx filename="app/page.tsx" showLineNumbers {6-7,15}
"use client";

import { TasksList } from "@/components/TasksList";
import { TasksProvider } from "@/lib/hooks/use-tasks";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotPopup } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";

export default function Home() {
  return (
    <CopilotKit ...>
      <TasksProvider>
        <TasksList />
      </TasksProvider>
      <CopilotPopup />
    </CopilotKit>
  );
}
```

Here's what we did:

- We imported the `<CopilotPopup />` component from `@copilotkit/react-ui`.
- We wrapped the page with the `<CopilotKit>` provider.
- We imported the built-in styles from `@copilotkit/react-ui`. This is optional.

Now, head back to your app and you'll find a chat popup in the bottom right corner of the page. At this point, you can start interacting with your copilot! 🎉

In the next step, we'll make our assistant smarter by providing it with readable state about our todo list.

